<% if (ob.validOptions.length) { %>
  <div class="flexColRows boxList border borderStacked clrP clrBr">
    <% ob.validOptions.forEach((service, i) => {
         const selected = ob.selectedOption && ob.selectedOption.name === service.name && ob.selectedOption.service === service.service;
    %>
      <div>
        <div class="btnRadio width100">
          <input type="radio"
                 class="js-shippingOption"
                 id="<%= `option${i}` %>"
                 <% if (selected) print('checked') %>
                 data-name="<%= service.name %>"
                 data-service="<%= service.service%>"
                 name="shippingOption">
          <label for="<%= `option${i}` %>" class="flex gutterH pad">
            <div>
              <div class="tx5 rowSm txB"><%= service.name %>: <%= service.service %></div>
              <div class="tx5b clrT2 txUnb">
                <%
                  let price = '';

                  try {
                    price = ob.currencyMod.convertAndFormatCurrency(service.bigPrice, ob.item.priceCurrency.code, ob.displayCurrency);
                  } catch (e) {
                    // pass
                  }
                %>
                <% if (service.estimatedDelivery) print(ob.polyT('purchase.serviceDetails', { price, delivery: service.estimatedDelivery })) %>
              </div>
            </div>
          </label>
        </div>
      </div>
    <% }); %>
  </div>
<% } else { %>
  <div class="padGi flexCent">
    <h5><%= ob.polyT('purchase.noShippableAddresses') %></h5>
  </div>
<% } %>
